<template>
  <div class="app-container">
    <!-- <p>路由容器调试：以下是路由组件</p> 确保此文本可见 -->
    
    <!-- 测试路由跳转的按钮 - 显示在所有页面 -->
    <!-- <div class="test-buttons" style="position: fixed; top: 10px; left: 10px; z-index: 999; background: white; padding: 10px;">
      <h4>路由测试</h4>
      <button @click="testOrderSuccess(999)">直接跳订单成功页</button>
      <button @click="goHome">返回首页</button>
    </div> -->
  
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    testOrderSuccess(orderId) {
      console.log('直接跳转到订单成功页，订单ID:', orderId);
      this.$router.push(`/order-success/${orderId}`);
    },
    goHome() {
      console.log('返回首页');
      this.$router.push('/');
    }
  }
}
</script>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background-color: #f8f8f8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  overflow-x: hidden;
}

.app-container {
  height: 100vh;
  max-width: 640px;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
}

/* 路由过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 全局按钮样式 */
button {
  outline: none;
  border: none;
  cursor: pointer;
  background: none;
}

/* 全局输入框样式 */
input {
  outline: none;
  border: none;
  background: none;
}

/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
